<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Knockout.js</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root">
      <ul
        data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"
      ></ul>
    </div>

    <!-- template -->
    <script type="text/html" id="seasonTemplate">
      <li>
          <strong data-bind="text: name"></strong>
          <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
      </li>
    </script>

    <script type="text/html" id="monthTemplate">
      <li>
          <span data-bind="text: month"></span>
          is in
          <span data-bind="text: season.name"></span>
      </li>
    </script>

    <script src="../scripts/lib/require.js" data-main="index.js"></script>
  </body>
</html>
